<template>
  <div class="matchList">
    <mt-navbar v-model="selected">
	  <mt-tab-item id="1">全部</mt-tab-item>
	  <mt-tab-item id="2">英雄联盟</mt-tab-item>
	  <mt-tab-item id="3">穿越火线</mt-tab-item>
	  <mt-tab-item id="4">星际争霸</mt-tab-item>
	  <mt-tab-item id="5">Dota 2</mt-tab-item>
	</mt-navbar>

<!-- tab-container -->
	<mt-tab-container v-model="selected">
	  <mt-tab-container-item id="1">
	    <div class="detail" v-for="n in 3" @click="goInfo">
	    	 <div class="left">
	    	 	<div class="img">
	    	 		<img src="" width="100%" height="100%">
	    	 	</div>
	    	 </div>
	    	 <div class="right">
	    	 	<h2 class="title">炉石传说高校星联赛</h2>
	    	 	<div class="status ing">进行中</div>
	    	 	<!-- <div class="status end">已结束</div> -->
	    	 	<div class="date">2018/09/20~2018/10/05</div>
	    	 	<div class="intro">
	    	 		<div>网游游戏</div>
	    	 		<div>23赛点/12省</div>
	    	 	</div>
	    	 </div>
	    </div>
	  </mt-tab-container-item>
	  <mt-tab-container-item id="2">
	    <mt-cell v-for="n in 4" :key="n" :title="'英雄联盟 ' + n" />
	  </mt-tab-container-item>
	  <mt-tab-container-item id="3">
	    <mt-cell v-for="n in 6" :key="n" :title="'穿越火线 ' + n" />
	  </mt-tab-container-item>
	  <mt-tab-container-item id="4">
	    <mt-cell v-for="n in 4" :key="n" :title="'星际争霸 ' + n" />
	  </mt-tab-container-item>
	  <mt-tab-container-item id="5">
	    <mt-cell v-for="n in 6" :key="n" :title="'Dota 2 ' + n" />
	  </mt-tab-container-item>
	</mt-tab-container>

  </div>
</template>
<script>

export default {
	name: 'matchList',
  	data() {
			return {
				selected: 1,
			}
		},

		mounted() {
			
		},

		methods: {
			goInfo() {
				this.$router.push({
                    path: '/matchInfo'
                });
			}
		},	
}

</script>
<style lang="less">
	.detail{
		width: 7.48rem;
		height: 2.3rem;
		display: flex;
		flex-direction: row;
		box-shadow:0 .01rem .02rem 0 rgba(216,216,216,0.12);
		.left{
			.img{
				width: 1.8rem;
				height: 1.8rem;
				margin: .21rem .3rem 0.4rem;
			}
		}
		.right{
			.title{
				font-size: .3rem;
				margin-top: .21rem;
			}
			.status{
				width:1.2rem;
				height:.4rem;
				border-radius:.2rem;
				display: flex;
				justify-content: center;
				align-items: center;
				&.ing{
					border:.02rem solid rgba(255,184,25,1);
					color: rgba(255,184,25,1);
				}
				&.end{
					border:.02rem solid rgba(229,229,229,1);
					color: rgba(229,229,229,1);
				}
			}
			.date{
				color: #999;
				margin-top: .1rem;
			}
			.intro{
				display: flex;
				justify-content: space-between;
				margin-top: .2rem;
				color:rgba(153,153,153,1);
				font-size: .28rem;
			}
		}
	}
</style>